<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>弹幕播放器</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body, html {
            height: 100%;
            overflow: hidden;
            font-family: "微软雅黑";
        }

        .container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        #bg-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .d_show {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 2;
        }

        .d_show div {
            position: absolute;
            font-size: 24px;
            color: white;
            white-space: nowrap;
            text-shadow: 1px 1px 2px black;
        }

        .send {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0.7);
            padding: 10px;
            z-index: 3;
        }

        .s_con {
            display: flex;
            justify-content: center;
            align-items: center;
            /* 删除 width: 120px; 这一行 */
        }


        .s_text {
            width: 800px;
            height: 44px;
            padding: 8px;
            border-radius: 6px 0 0 6px;
            border: none;
            outline: none;
            font-size: 18px;
        }

        .s_submit {
            width: 120px;   /* 修改这里：按钮更宽 */
            height: 44px;   /* 修改这里：按钮更高 */
            background: #65c33d;
            border: none;
            color: white;
            font-size: 16px; /* 可选：增大字体 */
            cursor: pointer;
            border-radius: 0 6px 6px 0;
        }




        .s_submit:hover {
            background: #3eaf0e;
        }
    </style>
</head>
<body>

<div class="container">
    <!-- 视频背景 -->
    <video id="bg-video" autoplay muted loop playsinline style="width:100%;height:100%;">
        <source src="../video/1.mp4" type="video/mp4">
        您的浏览器不支持视频播放。
    </video>

    <!-- 弹幕层 -->
    <div class="d_show" id="danmuArea"></div>

    <!-- 发送框 -->
    <div class="send">
        <div class="s_con">
            <input type="text" id="danmuInput" placeholder="输入弹幕..." />
            <button id="btnSend">发送</button>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        const danmuArea = $('#danmuArea');
        let index = 0;
        let top = 80;

        // 初始化 WebSocket
        const ws = new WebSocket("ws://localhost:8888/ws");

        ws.onmessage = function (event) {
            const msg = event.data;
            addDanmu(msg);
        };

        $('#btnSend').click(function () {
            const input = $('#danmuInput');
            const msg = input.val().trim();
            if (msg !== '') {
                ws.send(msg);
                input.val('');
            }
        });

        $('#danmuInput').on('keydown', function (e) {
            if (e.keyCode === 13) {
                $('#btnSend').click();
            }
        });

        function addDanmu(text) {
            const id = 'danmu-' + index++;
            const $danmu = $('<div>').attr('id', id).text(text);
            danmuArea.append($danmu);

            const screenHeight = $(window).height();
            const danmuWidth = $danmu.width();
            const danmuHeight = $danmu.height();

            let x = $(window).width();
            let y = top;

            if (y + danmuHeight > screenHeight - 100) {
                y = 80;
            }

            $danmu.css({
                left: x,
                top: y,
                color: getRandomColor()
            });

            $danmu.animate({
                left: -danmuWidth
            }, 10000, function () {
                $danmu.remove();
            });

            top += danmuHeight + 10;
            if (top > screenHeight - 100) {
                top = 80;
            }
        }

        function getRandomColor() {
            return '#' + Math.floor(Math.random()*16777215).toString(16);
        }
    });
</script>

</body>
</html>
